<template>
    <div class="mainss">
        <div class="tabs" @touchstart="touchstart" @touchend="touchend">
            <div class="fixedDiv">
                <van-icon class="back" name="arrow-left" :sticky="true" color="#ffffff" size="22px" @click="$router.back()" />
            </div>
            <van-tabs v-model:active="active" v-if="category.length" swipeable sticky>
                <van-tab v-for="(item,index) in category" :key="index" :title="item.name" :name="item.id">
                    <list class="mylist" :list="list" @touchEnd="getList(page+1,true)" :noback="true"></list>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<style lang="less" scoped>
.mainss {
    .fixedDiv {
        position: fixed;
        width: 100%;
        max-width: 640px;
        left: 50%;
        top: 0;
        background: red;
        transform: translateX(-50%);
        z-index: 300;
        .back {
            position: absolute;
            left: 5px;
            color: #fff !important;
            z-index: 300;
            top: 0;
            line-height: 44px;
        }
    }
    .mylist {
        min-height: 100vh;
        padding-top: 55px;
    }
    .tabs {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
        /deep/.van-tabs {
            z-index: 299;
        }
        /deep/.van-sticky {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            z-index: 100;
            .van-tabs__wrap {
                max-width: 640px;
                margin: 0 auto;
                position: relative;
            }
        }
    }
    /deep/.van-tabs,
    .van-tabs__wrap {
        display: block;
        max-width: 640px;
        margin: 0 auto;
        z-index: 299;
        .van-tabs__nav {
            background: @bgcolor;
            color: #fff;
            .van-tab--active {
                color: @yellow;
            }
            .van-tabs__line {
                background: @yellow;
            }
        }
    }
}
</style>
<script>
import list from '@/components/list/list'
export default {
    components: {
        list
    },
    data () {
        return {
            pageX: 0,
            list: [],
            value: '',
            active: '',
            category: [],
            loading: false,
            page: 1,
            activeId: ''
        }
    },
    mounted () {
        document.title = this.$route.query.title || "XINHUANXIANG"
        this.courseSearch()
    },
    watch: {
        active () {
            this.isTouch = false
            this.getList()
        }
    },
    // beforeRouteEnter (to, from, next) {
    //     to.meta.title = to.query.title || "课程"
    //     next()
    // },
    methods: {
        touchstart (e) {
            this.pageX = e.changedTouches[0].pageX
            this.activeId = this.active
        },
        touchend (e) {
            let pageX = e.changedTouches[0].pageX
            let distance = pageX - this.pageX
            if (distance > 100 && this.activeId == (this.category[0] || {}).id) {
                this.$router.back()
            }
        },
        courseSearch () {
            this.$model.comm.category(this.$route.query.id).then(res => {
                this.category = res.data || []
                if (this.category.length) {
                    this.active = this.category[0].id
                }
            })
        },
        getList (page) {
            if (this.loading && this.isTouch) {
                return false
            }
            this.page = page || 1
            if (!page) {
                this.list = []
            }
            this.loading = true
            this.$model.comm.courseSearch({ ['category_id']: this.active, page: this.page }).then(res => {
                this.loading = false
                this.isTouch = true
                this.list = this.list.concat(res.data.data || [])
            })
        }
    }
};
</script>